<template>
  <div class="scrolltext-demo-wrapper">
    <div class="component-example">
      <label class="example-title">使用示例</label>
      <div class="example">
        <h5>横向滚动消息</h5>
        <div class="scroll-text-example">
          <s-scroll-text-view :startScrollText="startScrollText" :vertical="false" :data="scrollData" circularType="normal"></s-scroll-text-view>
        </div>
        <h5>纵向滚动消息 circularType="normal" 普通消息滚动。播放到尾，停止播放。</h5>
        <div class="scroll-text-example">
          <s-scroll-text-view  :startScrollText="startScrollText" :vertical="true" :data="scrollData" circularType="normal" >
            &lt;!&ndash;props是随便起的变量名&ndash;&gt;
            <template slot-scope="props">
              <el-button size="mini" type="primary" @click="scrollDemoConfirm(props.item)">确认</el-button>
            </template>
          </s-scroll-text-view>
        </div>
      <h5>纵向滚动消息 circularType="circular" 消息播放到尾，再从头播放。</h5>
        <div class="scroll-text-example">
          <s-scroll-text-view   :startScrollText="startScrollText" :vertical="true" :data="scrollData" circularType="circular"></s-scroll-text-view>
        </div>
        <h5>纵向滚动消息 circularType="alternate" 循环消息滚动，已播放过的消息会放置到最后再不间断循环播放。</h5>
        <div class="scroll-text-example">
          <s-scroll-text-view  :startScrollText="startScrollText" :vertical="true" :data="scrollData" circularType="alternate"></s-scroll-text-view>
        </div>
        <h5>纵向滚动消息 circularType="normalContinuous" 持续输入新消息进行滚动显示。不循环播放，父组件持续传消息进行显示。</h5>
        <div class="scroll-text-example">
          <s-scroll-text-view  :startScrollText="startScrollText" :vertical="true" :data="scrollData" circularType="normalContinuous"
                               :supplementalData="supplementalData"></s-scroll-text-view>
        </div>
      </div>
    </div>
    <div class="component-document">
      <div class="import-property">
        <label class="prop-title">输入属性</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in props" :key="index">
            <label class="prop-name">{{item.name}}：</label>
            <span class="prop-desc">{{item.desc}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  // import SScrollTextView from '../../components/diy-components/ScrollText/ScrollTextView'
  export default {
    name: 'ScrollTextDemo',
    components:{
      // SScrollTextView
    },
    data() {
      return {
        //消息滚动组件
        startScrollText: false,
        scrollData: [  //初始滚动的消息数组
          {
            class: 'normal',
            time: '2019-08-01 09:00:00',
            info: '济南市PM2.5达标'
          },
          {
            class: 'danger',
            time: '2019-08-02 12:00:00',
            info: '济南市PM2.5达标'
          },
          {
            class: 'warn',
            time: '2019-08-03 18:00:00',
            info: '石家庄市PM2.5预警'
          },
          {
            class: 'danger',
            time: '2019-08-04 05:00:00',
            info: '唐山市PM2.5不达标'
          },
          {
            class: 'normal',
            time: '2019-08-05 09:00:00',
            info: '济南市PM2.5达标'
          },
          {
            class: 'warn',
            time: '2019-08-06 09:00:00',
            info: '济南市PM2.5达标'
          },
          {
            class: 'normal',
            time: '2019-08-07 09:00:00',
            info: '济南市PM2.5达标'
          },
          {
            class: 'danger',
            time: '2019-08-08 09:00:00',
            info: '济南市PM2.5达标'
          },
        ],
        alScrollData: [  //初始滚动的消息数组
          {
            class: 'normal',
            time: '2019-08-01 09:00:00',
            info: '济南市PM2.5达标'
          },
          {
            class: 'danger',
            time: '2019-08-02 12:00:00',
            info: '济南市PM2.5达标'
          },
          {
            class: 'warn',
            time: '2019-08-03 18:00:00',
            info: '石家庄市PM2.5预警'
          },
          {
            class: 'danger',
            time: '2019-08-04 05:00:00',
            info: '唐山市PM2.5不达标'
          },
          {
            class: 'normal',
            time: '2019-08-05 09:00:00',
            info: '济南市PM2.5达标'
          },
          {
            class: 'warn',
            time: '2019-08-06 09:00:00',
            info: '济南市PM2.5达标'
          },
          {
            class: 'normal',
            time: '2019-08-07 09:00:00',
            info: '济南市PM2.5达标'
          },
          {
            class: 'danger',
            time: '2019-08-08 09:00:00',
            info: '济南市PM2.5达标'
          },
        ],
        //消息滚动的形式
        circularType: 'normalContinuous', //normal：播放到尾，停止播放； circular：播放到尾，再从头播放；alternate：已播放过的消息会放置到最后再不间断循环播放；normalContinuous:不循环播放，父组件持续传消息进行显示
        //模拟数据，模拟持续推送新消息进行显示
        testScrollData: [{
          class: 'normal',
          time: '2019-08-09 05:00:00',
          info: '唐山市PM2.5不达标'
        },
          {
            class: 'danger',
            time: '2019-08-10 09:00:00',
            info: '济南市PM2.5达标'
          },
          {
            class: 'warn',
            time: '2019-08-11 09:00:00',
            info: '济南市PM2.5达标'
          },
          {
            class: 'normal',
            time: '2019-08-12 09:00:00',
            info: '济南市PM2.5达标'
          },
          {
            class: 'danger',
            time: '2019-08-13 09:00:00',
            info: '济南市PM2.5达标'
          },
        ],
        supplementalData: [],
        scrollTextTimer: null,
        ScrollTextTestNum: 0,
        props: [
          { name: 'vertical', desc: '默认值：true。消息横向滚动还是纵向滚动,默认消息纵向滚动，false：消息横向滚动。' },
          { name: 'circularType', desc: '默认值："normal"。消息播放方式。normal：播放到尾，停止播放； circular：播放到尾，再从头播放；alternate：已播放过的消息会放置到最后再不间断循环播放；normalContinuous:不循环播放，父组件持续传消息进行显示' },
          { name: 'data', desc: '默认[]。消息内容列表。' },
          { name: 'supplementalData', desc: '默认值：[]。陆续传入的滚动的消息。当circularTypes是normalContinuous时，此属性有输入值' },
        ],
      }
    },
    mounted() {
      this.startScrollText = false;
      if (this.circularType == 'normalContinuous') {
        this.scrollTextTimer = setInterval(() => {
          if (this.ScrollTextTestNum == this.testScrollData.length) {
            clearInterval(this.scrollTextTimer);
            return;
          }
          this.supplementalData = [this.testScrollData[this.ScrollTextTestNum]];
          this.ScrollTextTestNum++;
        }, 1000);
      }
      this.startScrollText = true;
    },
    methods: {
      scrollDemoConfirm(item){
        console.log('确认',item);
      },
    },

  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .scrolltext-demo-wrapper{
    width:100%;
    height:100%;
    .scroll-text-example{
      width:500px;
      height:200px;
      background: #053277;
      margin: 20px 0;
    }

  }

</style>
